<template>
    <div>
        <span
            v-for="(item,index) in data"
            :key="index"
            class="cms-checked"
            @click="selectData(item.id)"
            :class="{active:selectId.indexOf(item.id)>=0?true:false}">
            {{item.label}}
            <img src="./icon/checked.png" class="icon" v-if="selectId.indexOf(item.id)>=0?true:false">
        </span>
    </div>
</template>

<script>
export default {
    props:["data","value"],
	data () {
		return {
            n:null,
            selectId:[]
		}
	},
    watch:{
        selectId(val){
            console.log(val);
            this.$emit("input",val);
        },
        value(val){

        }
    },
	methods:{
        selectData(id){
            if(this.selectId.indexOf(id) >= 0){
                let n = this.selectId.indexOf(id);
                this.selectId.splice(n,1);
            }
            else{
                this.selectId.push(id);
            }
        }
	},
	mounted(){

	},
	created(){
        if(this.value){
            this.selectId = this.value;
        }
	}
}
</script>

<style lang="scss" scoped>
    .cms-checked{
        position: relative;
        padding: 8px 22px;
        border: 1px solid #DDDDDD;
        font-size: 14px;
        border-radius: 6px;
        cursor: pointer;
        margin: 4px 6px;
        .icon{
            position: absolute;
            right: 0;
            bottom: 0;
            height: 18px;
        }
    }
    .active{
        border-color: #288FF6;
        color:#288FF6;
    }
</style>
